<template>
    <div class="container">
        <van-nav-bar title="异常工单处理" left-arrow  @click-left="onClickLeft"/>
        <div class="content">
            <div class="header">
                <div class="title">{{ AbnormalListDetail.address }}</div>
                <template
                    v-for="(item,index) in AbnormalListDetailSrray"
                    :key="index"
                >
                    <div class="item">
                        <p>{{ item.title }}</p>
                        <p>{{ item.value }}</p>
                    </div>
                </template>
                <div class="describe">
                    <p>故障描述</p>
                    <textarea v-model="describeVal" placeholder="请输入故障描述"></textarea>
                </div>
            </div>
            <div class="footer">
                <p>处理结果</p>
                <textarea v-model="resultVal" placeholder="请输入处理结果"></textarea>
                <p>物料使用</p>
                <van-checkbox-group v-model="checked">
                    <van-checkbox name="推杆" label-position="left">1.推杆</van-checkbox>
                    <van-checkbox name="摄像头" label-position="left">2.摄像头</van-checkbox>
                    <van-checkbox name="内存卡" label-position="left">3.内存卡</van-checkbox>
                    <van-checkbox name="分空板" label-position="left">4.分空板</van-checkbox>
                    <van-checkbox name="路由器" label-position="left">5.路由器</van-checkbox>
                </van-checkbox-group>
                <div class="other" @click = "resetRadio">
                    6.其他<input type="text" placeholder="请输入其他物料" v-model="otherMaterial">
                </div>
            </div>
        </div>
        <button class="reportBtn" @click="goReportResult">上报处理结果</button>
    </div>
</template>

<script setup>
import { useRouter,useRoute } from 'vue-router';
import { 
    getAbnormalListDetail,
    ProcessingResultsReported
} from '@/api/AbnormalReport';
import { onMounted, ref } from 'vue';
import { showToast } from 'vant';
const router = useRouter()
const route = useRoute()
const onClickLeft = () => { //点击返回
    router.push({ path:'/AbnormalList' })
}

let AbnormalListDetail = ref({})
let AbnormalListDetailSrray = ref([])
const getAbnormalListDetailFun = async () => {
    let AbnormalListDetailData = {
        pageIndex:1,
        pageSize:1,
        id:Number(route.query.id)
    }
    try{
        const res = await getAbnormalListDetail(AbnormalListDetailData)
        if(res.data.code == 200){
            AbnormalListDetail.value = res.data.dataset.dataset[0]
            AbnormalListDetailSrray.value = [
                {title:'工单号',value:AbnormalListDetail.value.gdId},
                {title:'设备编号',value:AbnormalListDetail.value.code},
                {title:'上报人',value:AbnormalListDetail.value.reportUsername},
                {title:'上报时间',value:AbnormalListDetail.value.reportTime},
                {title:'故障类型',value:AbnormalListDetail.value.abnormalType},
            ]
            // console.log(AbnormalListDetail.value,AbnormalListDetailSrray.value);
        }
    }catch(error){}
}

let describeVal = ref('')//故障描述 
let resultVal = ref('')//处理结果
let checked = ref([])//物料
let otherMaterial = ref('')//其他物料

const goReportResult = async () => { //上报处理结果
    if(otherMaterial.value){
        checked.value.push(otherMaterial.value)
    }
    let ProcessingResultsReportedData = {
        id:route.query.id,
        material:checked.value,
        result:resultVal.value,
        abnormalDescription:describeVal.value
    }
    if(ProcessingResultsReportedData.material && ProcessingResultsReportedData.result && ProcessingResultsReportedData.abnormalDescription){
        try{
            const res = await ProcessingResultsReported(ProcessingResultsReportedData)
            console.log(res);
            if(res.data.code == 200){
                showToast('上传处理结果成功')
                setTimeout(()=>{
                    router.push({ path:'/AbnormalList' })
                },1000)
            }
        }catch(error){}
    }else{
        showToast('请将信息填写完整')
    }
}

onMounted(() => {
    getAbnormalListDetailFun()
})
</script>

<style lang="less" scoped>
.container{
    background-color: #F9F9F9;
    box-sizing: border-box;
    padding-bottom: 10em;
    :deep(.van-nav-bar .van-icon){
        color:#000
    }
    .content{
        width:100vw;
        font-size: 4em;
        .header{
            width:100vw;
            box-sizing: border-box;
            padding:1em 0.5em;
            background-color: #fff;
            .title{
                font-weight: bold;
                box-sizing: border-box;
                padding-bottom: 1em;
                border-bottom: 1px dashed #ccc;
            }
            .item{
                box-sizing: border-box;
                padding-top: 1em;
                display: flex;
                justify-content: space-between;
            }
            .describe{
                box-sizing: border-box;
                padding-top: 1em;
                display: flex;
                flex-direction: column;
                gap:1em;
                textarea{
                    resize: none;
                    height:8em;
                    border-radius: 0.5em;
                    box-sizing: border-box;
                    padding:0.5em;
                    border:1px solid #ccc;
                }
            }
        }
        .footer{
            width:100vw;
            box-sizing: border-box;
            padding:1em 0.5em;
            background-color: #fff;
            margin-top:1em;
            display: flex;
            flex-direction: column;
            gap:1em;
            p{
                font-weight: bold;
            }
            textarea{
                resize: none;
                height:8em;
                border-radius: 0.5em;
                box-sizing: border-box;
                padding:0.5em;
                border:1px solid #ccc;
            }
            .van-checkbox-group{
                display: flex;
                flex-wrap: wrap;
                gap:0.7em;
                .van-checkbox{
                    width:30vw;
                }
                .other{
                    width:100vw;
                }
            }
            .other{
                width:100vw;
            }
            input{
                border:none;
                border-bottom: 1px solid #ccc;
                box-sizing: border-box;
                padding-left:1em;
            }
        }
    }
    .reportBtn{
        width:40vw; 
        height:3em;
        font-size: 4em;
        background-color: #005DFF;
        color:#fff;
        font-weight: bold;
        border-radius: 2em;
        border:none;
        display: block;
        margin:0 auto;
        margin-top:4em;
    }
}
</style>